<template>
  <div class="profit-table">
    <div class="flex flex-align-items-center flex-justify-content-between">
      <div class="tabpanel-title">Detalhes do pacote</div>
      <div class="tabpanel-btn">
        <button>A actualização</button>
      </div>
    </div>
    <div class="table-content mt15">
      <el-table :data="tableData" tooltip-effect="dark" style="width: 100%">
        <el-table-column align="center" prop="text1" label="Secção"></el-table-column>
        <el-table-column align="center" prop="text2" label="Nível de membros"> </el-table-column>
        <el-table-column align="center" prop="text3" label="Número preferencial de itens"> </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
export default {
  name: 'ProfitTable',
  data() {
    return {
      tableData: [
        {
          text1: 'Aqui está o nome da seção',
          text2: 'Junior',
          text3: '3/100',
        },
        {
          text1: 'Aqui está o nome da seção',
          text2: 'Junior',
          text3: '3/100',
        },
        {
          text1: 'Aqui está o nome da seção',
          text2: 'Junior',
          text3: '3/100',
        },
        {
          text1: 'Aqui está o nome da seção',
          text2: 'Junior',
          text3: '3/100',
        },
      ],
    };
  },
};
</script>
<style lang="scss" scoped>
.profit-table {
  /* table */
  .tabpanel-title {
    position: relative;
    font-size: 24px;
    color: #333;
    font-weight: bold;
    .color-primary {
      color: #fb8c24;
    }
  }
  .tabpanel-btn {
    button {
      width: 141px;
      height: 40px;
      background: #fb7924;
      border-radius: 4px;
      color: #fff;
      line-height: 38px;
      border: none;
      outline: none;
      cursor: pointer;
      &:hover {
        background: #fdaf66;
      }
      &:active {
        background: #e27e20;
      }
    }
  }
  .table-content {
    ::v-deep .el-table {
      thead {
        th {
          color: #fff;
          font-size: 18px;
          font-weight: bold;
          text-align: center;
          padding: 0;
          vertical-align: middle;
          height: 56px;
          background: #333;
          box-sizing: border-box;
        }
      }
      tbody {
        tr {
          height: 80px;
          background: #fff;
          box-sizing: border-box;
          td {
            color: #595959;
            font-size: 16px;
            text-align: center;
            padding: 0;
            vertical-align: middle;
          }
        }
      }
    }
  }
}
</style>
